<template>
	<flexbox 
		style="height:100%;" 
		direction="column" 
		align="stretch">
		<div class="header">
			系统设置
		</div>
		<div 
			v-loading="loading" 
			class="body"
			>
			<el-form 
				style="width: 500px;"
				:model="form" 
				ref="numberValidateForm" 
				label-width="150px">
				<el-form-item label="系统名称">
				    <el-input v-model="form.name" style="width: 300px;"></el-input>
				</el-form-item>
				<el-form-item label="系统LOGO">
				    <el-upload
				    	v-if="form.logo == ''" 
				    	:show-file-list="false" 
				    	:http-request="fileUpload" 
				    	drag
				    	class="upload" 
				    	action="http" 
				    	accept="image/png, image/jpeg, image/gif, image/jpg">
				    	<i class="el-icon-plus uploader-icon" />
				    </el-upload>
				    <div 
				    	v-else 
				    	class="upload-show">
				    	<img :src="form.logo">
				    	<i 
				    		class="el-icon-remove icon-delete" 
				    		@click="deleteSystemImage" />
				    </div>
				</el-form-item>
				<el-form-item label="允许上传文件类型">
				    <!-- <el-input v-model="form.upload_file_type"></el-input> -->
					<el-select 
						multiple 
						v-model="form.upload_file_type" 
						placeholder="请选择"
						style="width: 300px;">
					    <el-option
							v-for="item in upload_file_arr"
							:key="item.value"
							:label="item.label"
							:value="item.value">
					    </el-option>
					</el-select>
				</el-form-item>
				
				<el-form-item>
					<el-button 
						type="primary"
						v-if="systemSaveAuth" 
						@click="save()">保存</el-button>
				</el-form-item>
			</el-form>
				
		</div>
		<edit-image 
			:fixed-number="[15, 15]" 
			:show="showEditImage" 
			:image="editImage" 
			:file="editFile" 
			title="编辑企业logo"
			preview-width="150px" 
			preview-height="150px" 
			preview-radius="0" 
			width="550px" 
			save-button-title="确定"
			@save="submiteImage" 
			@close="showEditImage=false" />
		
		
	</flexbox>
</template>

<script>
	import {mapGetters} from 'vuex'
	import { adminSystemSave } from '@/api/setting/setting'
	import EditImage from '@/components/EditImage'
	export default {
		name: 'SystemConfig',
		components: {
			EditImage
		},
		
		data() {
			return {
				loading: false,
				showEditImage: false,
				editImage: null,
				editFile: null,
				//基本信息
				form:{
					"name": "",
					"logo": "",
					"upload_file_type": ""
				},
				upload_file_arr:[
					{ value: 'pdf',label: 'pdf' }, 
					{ value: 'doc',label: 'doc' },
					{ value: 'docx',label: 'docx' },
					{ value: 'jpg',label: 'jpg' },
					{ value: 'png',label: 'png' },
					{ value: 'xls',label: 'xls' },
					{ value: 'xlsx',label: 'xlsx' },
					{ value: 'ppt',label: 'ppt' },
					{ value: 'pptx',label: 'pptx' }
				],
				editedImage: null ,// 编辑后的图片
			}
		},
		computed: {
			...mapGetters(['allAuth']),
			systemSaveAuth() {
				return this.allAuth.setting && this.allAuth.setting.save
			}
		},
		mounted() {
			this.getDetail()
		},
		methods: {
			/** 附件上传 */
			fileUpload(content) {
				const reader = new FileReader()
				var self = this
				reader.onload = function(e) {
					let result
					if (typeof e.target.result === 'object') {
						// 把Array Buffer转化为blob 如果是base64不需要
						result = window.URL.createObjectURL(new Blob([e.target.result]))
					} else {
						result = e.target.result
					}
					self.editImage = result
					self.editFile = content.file
					self.showEditImage = true
				}
				reader.readAsDataURL(content.file)
			},
			deleteSystemImage() {
				this.form.logo  = ''
				this.editedImage = null
			},
			getDetail() {
				this.loading = true
				this.$store
					.dispatch('SystemLogoAndName')
					.then(res => {
						this.loading = false
						if(res.data){
							this.form = JSON.parse(JSON.stringify(res.data))
						}
						
					})
					.catch(() => {
						this.loading = false
					})
			},
			submiteImage(data) {
				this.editedImage = data
				this.form.logo = data.image
			},
			save() {
				if (!this.form.name) {
					this.$message.error('系统名称不能为空')
				} else {
					this.loading = true
					let param = new FormData()
					param.append('name', this.form.name)
					param.append('logo', this.form.logo)
					
					let file_type_arr = this.form.upload_file_type
					for (let i = 0; i < file_type_arr.length; i++) {
						param.append('upload_file_type[]', file_type_arr[i])
					}
					param.append('privacy_phone', this.form.privacy_phone)
					if (this.editedImage) {
						param.append(
							'file',
							this.editedImage.blob,
							this.editedImage.file.name
						)
					}
					
					adminSystemSave(param)
						.then(res => {
							this.loading = false
							this.$message.success(res.data)
							this.getDetail()
						})
						.catch(() => {
							this.loading = false
						})
				}
			},
			
			// 删除部门和用户
			deleteuser(type,index) {
				this.formData[type].staff.splice(index, 1)
			},
			deleteDepuser(type,index) {
				this.formData[type].dep.splice(index, 1)
			},
			
			// 确认按钮
			popoverSubmit(type,members, dep) {
				console.log(dep);
				if(type){
					this.$set(this.formData, type, { staff: members, dep: dep })
				}
			},
			
			
			
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../setting/styles/table.scss';
	.header {
		height: 60px;
		line-height: 60px;
		position: relative;
		z-index: 100;
		padding: 0 20px;
		font-size: 18px;
	}

	.body {
		flex: 1;
		overflow-y: auto;
		padding: 40px 30px 20px 30px;
		background-color: white;
		border: 1px solid #e6e6e6;
		border-radius: 2px;
		position: relative;
	}

	.save-button {
		position: absolute;
		top: 8px;
		right: 30px;
	}

	.section {
		margin-bottom: 30px;

		.name {
			color: #777777;
			font-size: 12px;
			margin-bottom: 8px;
		}

		.el-input {
			width: 300px;
		}
	}

	.uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 300px;
		height: 80px;
		line-height: 80px;
		text-align: center;
	}

	.upload /deep/ .el-upload-dragger {
		width: 300px;
		height: 80px;
	}

	.upload-show {
		position: relative;
		display: block;
		width: 300px;
		height: 80px;

		img {
			width: 100%;
			height: 100%;
		}

		.icon-delete {
			position: absolute;
			top: -10px;
			right: -8px;
			color: red;
			font-size: 20px;
			display: none;
		}
	}

	.upload-show:hover {
		.icon-delete {
			display: block;
		}
	}
	
	 /deep/ .el-dialog__body{
		padding-top: 0px !important;
	}
	
	.user-container {
		width: 350px;
		// margin-top: 3px;
		min-height: 34px;
		position: relative;
		border-radius: 3px;
		font-size: 12px;
		border: 1px solid #ddd;
		color: #333333;
		padding: 2px;
		line-height: 15px;
		max-height: 105px;
		overflow-y: auto;
		.user-item {
			padding: 5px;
			background-color: #e2ebf9;
			border-radius: 3px;
			margin: 3px;
			cursor: pointer;
		}
		.add-item {
			padding: 5px;
			color: #3e84e9;
			cursor: pointer;
		}
		.delete-icon {
			color: #999;
			cursor: pointer;
		}
		&:hover {
			border-color: #c0c4cc;
		}
	}
	.el-icon-close {
		margin-right: 0;
		padding: 0px;
		cursor: pointer;
	}
	
</style>
